.cf-rule-style-editor {
    .cf-preview-wrap {
        margin-top: var(--margin-lg);
        padding: var(--padding-xs) var(--padding-sm);
        border: 1px solid rgb(var(--border-color));
        border-radius: var(--border-radius-base);
    }
    .text {
        font-size: var(--font-size-xxs);
    }
    .position-relative {
        position: relative;
    }

    .btn-list {
        display: flex;
        justify-content: flex-end;
        margin-bottom: var(--margin-base);
    }

    .util-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: var(--font-size-xxs);
    }

    .icon-set {
        .render-config {
            display: flex;
            align-items: center;
            font-size: var(--font-size-xxs);
            justify-content: flex-start;
        }
        .flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .width45 {
            width: 45%;
        }
        .icon-wrap {
            display: flex;
            align-items: center;
        }
        .icon {
            width: 20px;
            height: 20px;
        }
        .dropdown-icon {
            background-color: rgb(var(--bg-color-secondary));
            border: 1px solid rgb(var(--border-color));
            border-radius: var(--border-radius-base);
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: center;
            padding: var(--padding-sm) var(--padding-lg);
            font-size: var(--font-size-xxs);
            color: rgb(var(--text-color-secondary));
            transition: all 0.15s;
            &:hover {
                border-color: rgb(var(--primary-color)) !important;
            }
            .icon {
                width: 16px;
                height: 16px;
            }
        }
        .error-input {
            border: 1px solid rgb(var(--red-400));
        }
        .error-text {
            color: rgb(var(--red-400));
            font-size: 12px;
            position: absolute;
        }
    }
}
.icon-group-list {
    padding: var(--padding-base);
    font-size: var(--font-size-xs);
    box-sizing: border-box;
    width: 328px;
    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    outline: none;
    box-shadow: var(--box-shadow-base);
    .title {
        font-size: 13px;
        margin-bottom: var(--margin-xxs);
    }
    .group {
        margin-bottom: var(--margin-sm);
    }
    .item-content {
        display: flex;
        flex-wrap: wrap;
        .item-wrap {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 50%;
            margin-bottom: 4px;
            .item {
                border-radius: var(--border-radius-base);
                cursor: pointer;
                :not(:first-child).icon {
                    margin-left: 8px;
                }

                &:hover {
                    background-color: rgb(var(--bg-color-hover));
                }
            }
            :not(:first-child).icon {
                margin-left: 8px;
            }
        }
    }

    .icon {
        width: 20px;
        height: 20px;
    }
}
.icon-item-list-wrap {
    padding: var(--padding-base) 4px var(--padding-base) var(--padding-base);
    font-size: var(--font-size-xs);
    background-color: rgb(var(--bg-color-secondary));
    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    outline: none;
    box-shadow: var(--box-shadow-base);
    .none {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        cursor: pointer;
        padding-left: 4px;
        span {
            margin-left: 8px;
        }
    }

    .icon-item-list {
        display: flex;
        width: 252px;
        flex-wrap: wrap;
        .item {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--border-radius-base);
            margin-right: 8px;
            margin-bottom: 8px;
            cursor: pointer;

            &:hover {
                background-color: rgb(var(--bg-color-hover));
            }
        }

        .icon {
            width: 20px;
            height: 20px;
        }
    }
}

.width100 {
    width: 100%;
}
.stress {
    color: rgb(var(--text-color));
    font-weight: 500;
}
